<template>
  <a-modal v-model:visible="visible" :closable="false" :footer="null" :maskClosable="false">
    <a-form :model="scoreEntity" :hideRequiredMark="true" ref="formref" @finish="onSubmit">
      <a-form-item label="数额: " name="num" :rules="[{ required: true, message: '请输入数额!' }]">
        <a-input-number v-model:value="scoreEntity.num" :min="1" :max="10" :defaultValue="3"/>
      </a-form-item>
      <a-form-item label="备注: " name="mark" :rules="[{ required: true, message: '请输入备注!' }]">
        <a-textarea v-model:value="scoreEntity.mark" placeholder="备注" :rows="4"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit">确认</a-button>
        <a-button style="margin-left: 10px" @click="onCancel">取消</a-button>
      </a-form-item>
    </a-form>
  </a-modal>

  <div>
    <a-row v-for="(item,index) in rewardList" :key="index" style="margin: 10px">
      <a-col :span="4">打赏人：{{ item.userName }}</a-col>
      <a-col :span="5">打赏时间：{{ item.time }}</a-col>
      <a-col :span="5">打赏数额：{{ item.num }}</a-col>
      <a-col :span="10">备注：{{ item.mark }}</a-col>
    </a-row>
    <div style="margin: 10px">
      <a @click="showModal">我也要打赏</a>
    </div>
  </div>
</template>

<script>
import {ref, reactive, defineComponent, toRaw} from "vue";
import {get, put, post, tip, del} from "@/common";
import {message} from "ant-design-vue";

export default {
  name: "GiveReward",
  props: {
    postID: Number
  },
  setup(props, {emit}) {
    const visible = ref(false);

    const scoreEntity = reactive({
      postID: props.postID,
      num: null,
      mark: null
    });

    const rewardList = ref({});

    const formref = ref();

    const getRewardList = () => {
      get("/score/rewardList", scoreEntity).then((res) => {
        rewardList.value = res.data;
      })
    };
    getRewardList();

    const showModal = () => {
      visible.value = true;
    };

    const onSubmit = () => {
      post("/score/reward", scoreEntity).then((res) => {
        message.success("打赏成功!");
        onCancel();
        getRewardList();
      })
    };

    const onCancel = () => {
      formref.value.resetFields();
      visible.value = false;
    };

    return {
      scoreEntity,
      rewardList,
      visible,
      formref,
      showModal,
      onSubmit,
      onCancel
    };
  },
}
</script>

<style scoped>

</style>